<template>
  <Header></Header>
  <NavSwiper></NavSwiper>
  <!-- //异步加载渲染 -->
  <div ref="target">
    <NewCourse v-if="targetIsVisible"></NewCourse>
  </div>
  <Footer></Footer>
</template>
<script setup>
//异步组件
import { useIntersectionObserver } from '@vueuse/core'
// 异步加载创建组件
const NewCourse = defineAsyncComponent(() =>
  import('@/components/home/NewCourse.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);


const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting
    }
  },
)


</script>
<style scoped lang='scss'>
</style>

